<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_body">
				<view class="my_container_body_head"></view>
				<view class="body_button">
					<view class="body_button_left" :class="active === '1' ? 'button_active' : ''" @click="change('1')">
						会员卡</view>
					<view class="body_button_right" :class="active === '2' ? 'button_active' : ''" @click="change('2')">
						会员券</view>
				</view>
				<view class="body_item">
					<view v-if="active === '1'">
						<view v-for="(item, index) in vipList" :key="index" class="body_item_vip">
							<view class="body_item_vip_head">
								<image :src="item.briefUserInfo.avatar"></image>
								<view class="vip_head_item">
									<view>{{ item.briefUserInfo.nickName }}</view>
									<view>会员有效期至：{{ item.vipEndDateStr }}</view>
								</view>
							</view>
							<view class="xian"></view>
							<view class="body_item_vip_body">{{ item.vipTypeName }}</view>
						</view>
					</view>
					<view v-else>
						<view v-for="(item, index) in cardList" :key="index"
							:class="[item.status == '1' ? 'show_unused' : 'show_used', 'body_item_card']">
							<view class="left">
								<view>{{ item.money == null ? '' : item.money }}</view>
								<view>元</view>
							</view>
							<view class="shu"></view>
							<view class="center">
								<view>会员免费体验券</view>
								<view class="center_show">发放时间：{{ item.createTime }}</view>
								<view class="center_show" v-if="item.status == 2">使用时间：{{ item.useDate }}</view>
								<view class="center_show" v-else>过期时间：{{ item.validEndDate }}</view>
							</view>
							<view class="right">{{ item.statusName}}</view>
						</view>
						<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
							<u-loadmore icon :status="status" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				active: '1',
				ticketType: '1',
				pageTitle: '会员卡券',
				vipList: [],
				cardList: [],
				triggered: false,
				pageNum: 1,
				pageSize: 7,
				total: 0,
				status: 'loading',
				show: true
			};
		},
		onLoad() {
			this.pageNum = 1;
			this.cardList = [];
			this.vipList = [];
			this.getDataList();
		},
		onPullDownRefresh() {
			// 下拉刷新的处理逻辑
			this.pageNum = 1;
			this.getDataList();
		},
		onReachBottom() {
			if (this.active == 1) {
				if (this.total == this.vipList.length) {
					this.status = 'nomore';
					this.show = true;
					return;
				}
			} else {
				if (this.total == this.cardList.length) {
					this.status = 'nomore';
					this.show = true;
					return;
				}
			}
			console.log('加载数据');
			this.show = true;
			this.pageNum++;
			this.getDataList();
		},
		methods: {
			change(index) {
				this.active = index;
				this.ticketType = index;
				this.pageNum = 1;
				this.getDataList();
			},
			getDataList() {
				var requestData = {
					searchType: this.ticketType,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				this.$https.post(this.$api.myTicketInfo, requestData).then((res) => {
					if (res.code === 200) {
						this.total = res.total;
						if (this.pageNum == 1 && this.active == 2) {
							console.log('??');
							this.cardList = [];
						}
						if (this.ticketType == 1) {
							this.vipList = res.data;
							console.log('?');
						} else {
							this.cardList = [...this.cardList, ...res.data];
							console.log('??');
							console.log(this.cardList);
						}
						if (this.total == 0) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;

		.my_container_body {
			width: 750rpx;

			.my_container_body_body {
				width: 750rpx;
				min-height: 1624rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-style: normal;
				text-transform: none;
				background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);

				.my_container_body_head {
					width: 686rpx;
					height: 176rpx;
				}

				.body_button {
					width: 686rpx;
					height: 90rpx;
					display: flex;
					margin-left: 32rpx;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					line-height: 90rpx;
					margin-top: 20rpx;

					.body_button_left {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.body_button_right {
						margin-left: 26rpx;
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.button_active {
						background: #1ee825 !important;
						color: #ffffff !important;
					}
				}

				.body_item {
					width: 686rpx;

					.body_item_vip {
						margin-top: 32rpx;
						width: 686rpx;
						background-image: url('/static/imags/huiyuan3.png');
						background-size: cover;
						/* 图片缩放以完全覆盖 */
						background-position: center;
						/* 图片居中对齐 */
						background-repeat: no-repeat;
						/* 禁止背景图片重复 */
						height: 260rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-left: 32rpx;

						.body_item_vip_head {
							width: 686rpx;
							height: 170rpx;
							display: flex;

							image {
								width: 84rpx;
								height: 84rpx;
								margin-top: 34rpx;
								margin-left: 32rpx;
								border-radius: 50rpx;
							}

							.vip_head_item {
								margin-left: 14rpx;
								width: 524rpx;

								:nth-child(1) {
									width: 524rpx;
									margin-top: 32rpx;
									font-size: 36rpx;
									color: #965b1e;
									line-height: 50rpx;
									font-weight: 500;
								}

								:nth-child(2) {
									width: 524rpx;
									height: 30rpx;
									line-height: 30rpx;
									margin-top: 6rpx;
									font-size: 22rpx;
									color: #9a5300;
									font-weight: 400;
								}
							}
						}

						.xian {
							width: 638rpx;
							margin-left: 24rpx;
							height: 1rpx;
							background: #563f25;
						}

						.body_item_vip_body {
							width: 686rpx;
							height: 90rpx;
							text-align: center;
							line-height: 90rpx;
							color: #d28005;
							font-weight: 500;
							font-size: 30rpx;
						}
					}

					.body_item_card {
						width: 686rpx;
						height: 200rpx;
						margin-top: 32rpx;
						margin-left: 32rpx;
						display: flex;
						background-size: cover;
						/* 图片缩放以完全覆盖 */
						background-position: center;
						/* 图片居中对齐 */
						background-repeat: no-repeat;

						/* 禁止背景图片重复 */
						.left {
							display: flex;
							width: 172rpx;
							height: 96rpx;
							margin-top: 46rpx;
							align-items: center;
							/* 垂直居中 */
							justify-content: center;

							/* 水平居中 */
							:nth-child(1) {
								font-weight: bold;
								font-size: 50rpx;
								line-height: 96rpx;
								/* 垂直对齐 */
								color: #ff4400;
								text-align: right;
								/* 可选，根据需求调整 */
							}

							:nth-child(2) {
								margin-top: 20rpx;
								font-weight: bold;
								font-size: 24rpx;
								line-height: 48rpx;
								color: #ff4400;
								text-align: center;
								margin-left: 4rpx;
								/* 调整间距 */
							}
						}

						.shu {
							height: 106rpx;
							width: 0;
							/* 宽度设为0 */
							border-left: 3rpx dashed #dec8be;
							/* 使用虚线 */
							margin-top: 50rpx;
						}

						.center {
							margin-left: 28rpx;
							width: 298rpx;

							:nth-child(1) {
								width: 322rpx;
								height: 48rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #282828;
								line-height: 48rpx;
								text-align: left;
								margin-top: 34rpx;
							}

							.center_show {
								width: 298rpx;
								height: 36rpx;
								margin-top: 8rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #777777;
								line-height: 35rpx;
								text-align: left;
							}

							.three {
								width: 298rpx;
								height: 36rpx;
								margin-top: 4rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #777777;
								line-height: 35rpx;
								text-align: left;
							}
						}
					}

					.show_unused {
						background-image: url('../../static/imags/unused.png');

						.right {
							width: 140rpx;
							height: 48rpx;
							margin-left: 24rpx;
							background: #965b1e;
							text-align: center;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 48rpx;
							margin-top: 76rpx;
						}
					}

					.show_used {
						background-image: url('../../static/imags/used.png');

						.right {
							width: 140rpx;
							height: 48rpx;
							margin-left: 24rpx;
							background: #c7c7c7;
							text-align: center;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 48rpx;
							margin-top: 76rpx;
						}
					}
				}
			}
		}
	}
</style>